<template>
  <div class="yhbbs-ckeditor-container">
    <ckeditor
      :config="editorConfig"
      :editor="editor"
      @ready="onReady"
      v-model="editorData"
      @blur="onEditorBlur"
    ></ckeditor>
  </div>
</template>

<script>
import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document'
import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn' //中文包
import { $ckeditorFileUpload } from '@/api/common/adjunctApi'
export default {
  name: 'YhbbsCkeditor',
  props: {
    contents: String
  },
  created() {
    if (!!this.contents) {
      this.editorData = this.contents
    }
  },
  methods: {
    onReady(editor) {
      // Insert the toolbar before the editable area.
      editor.ui
        .getEditableElement()
        .parentElement.insertBefore(
          editor.ui.view.toolbar.element,
          editor.ui.getEditableElement()
        )
    },
    onEditorBlur() {
      this.$emit('getEditorData', this.editorData)
    }
  },
  data() {
    return {
      editorData: '请填写内容.....',
      editor: DecoupledEditor,
      editorConfig: {
        language: 'zh-cn',
        fontFamily: {
          options: [
            '宋体',
            '仿宋',
            '微软雅黑',
            '黑体',
            '仿宋_GB2312',
            '楷体',
            '隶书',
            '幼圆'
          ]
        },
        ckfinder: {
          uploadUrl: $ckeditorFileUpload // 后端处理上传逻辑返回json数据,包括uploaded 上传的字节数 和url两个字段
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.yhbbs-ckeditor-container {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .ck-editor__editable {
    // min-height: 250px;
  }
}
</style>
